<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            left: 0;
            top: 0;
        }


        p{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 0;
            top: 350px;
        }
    </style>
</head>
<body>
    <div></div>


    <p></p>

    <script>
        // 用js 模仿transition 
        // 点击div  或者 p 标签  让他们的距离 left 变成 500px

        // const divele = document.querySelector('div');
        // divele.onclick = function(){
            // divele.style.left = '500px'; //瞬间定位了
        //     // 我们想过渡一下子

        //     var init = 0;
        //     var timer = setInterval(function(){
        //         init += 5;
        //         divele.style.left = init + 'px';
        //         if(init >= 500){
        //             clearInterval(timer)
        //         }

        //     },10)
        // }

        // p 也想同样的效果 
        // 第一种方案 把上面代码复制一遍 改成 p元素 
        // 代码重复太多 

        // 第二种方案 封装成个函数 
        // 上面哪些是变的 那些是不变的  
        // 变化的部分通过形参 传递  不变的直接保留 

        // 需要的部分  
        //  哪个元素动 
        //  怎么动  left  top  width  height 
        //  设置一个目标值  

        // 注意 style type 不能使用.语法  使用数组关联语法 
        // 传参的时候 不能直接传 样式名  需要给样式名加 引号 
        // function move(ele,type,target,times){
        //     ele.onclick = function(){
        //         var init = 0;
        //         var timer = setInterval(function(){
        //             init += 5;
        //             ele.style[type] = init + 'px';
        //             if(init >= target){
        //                 clearInterval(timer)
        //             }

        //         },times)
        //     }
        // }

        // var divele = document.querySelector('div');
        // move(divele,'left',500,20);

        // var pele = document.querySelector('p');
        // move(pele,'top',666,10);


        function move(ele,type,target,times){
        
                var init = 0;
                var timer = setInterval(function(){
                    init += 5;
                    ele.style[type] = init + 'px';
                    if(init >= target){
                        clearInterval(timer)
                    }

                },times)

        }

        var divele = document.querySelector('div');
        divele.onclick = function(){
            
            move(this,'left',500,10)
        }

        var pele = document.querySelector('p');
        pele.onmouseover = function(){
            move(this,'top',666,20)
        }
    </script>
</body>
</html>